<template>
	<view class="page">

		<!-- 主要内容区域 -->
		<view class="wrapper" id="wrappers">
			<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="true"
				:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
				<view class="orderbox refund-list-box font13" v-if="refundList.length > 0">
					<view v-for="(item, index) in refundList" :key="index" class="refund-item">
						<!-- 店铺信息 -->
						<view @click="goToDetail(item)" class="orderbox-h display-flex">
							<view class="orderbox-hl display-flex">
								<image class="store-icon"
									:src="item.manufac_logo ? (imgBaseUrl + item.manufac_logo) : '/static/icon-dianpu@2x.png'" />
								<view>{{ item.manufac_name }}</view>
								<image src="/static/icon-gengduo@2x.png" class="r-arrow" />
							</view>
							<view class="order-status">{{ getRefundStateText(item) }}</view>
						</view>

						<!-- 商品信息 -->
						<view @click="goToDetail(item)" class="goods-list display-flex-l">
							<view class="photos display-flex-l"
								:style="{ width: item.img_path.length > 1 ? '100%' : 'auto' }">
								<view v-for="(img, imgIndex) in item.img_path" :key="imgIndex">
									<image :src="imgBaseUrl + img" />
								</view>
							</view>
							<view class="titles" v-if="item.img_path.length <= 1">
								<view>{{ item.goods_name }}</view>
								<view>{{ item.goods_spec }}</view>
							</view>
						</view>

						<!-- 操作按钮 -->
						<view class="stipulates display-flex-end" v-if="shouldShowButtons(item)"
							:data-order-num="item.order_num" :data-amount="item.pay_amount" :data-order-id="item.id">
							<view v-if="getButtonConfig(item).showCancel" class="order-btn"
								@click="cancelRefund(item.id)">
								取消退款
							</view>
							<view v-if="getButtonConfig(item).showApply" class="order-btn border-red"
								@click="applyRefund(item.id)">
								申请退款
							</view>
							<view v-if="getButtonConfig(item).showCancelRefund" class="order-btn border-red"
								@click="cancelRefund(item.id)">
								取消退款
							</view>
							<view v-if="getButtonConfig(item).showVerdict" class="order-btn border-red"
								@click="applyVerdict(item.id)">
								申请仲裁
							</view>
							<view v-if="getButtonConfig(item).showLogistic" class="order-btn border-red"
								@click="completeLogistic(item.manufac_id, item.id)">
								完善物流
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多提示 -->
				<view class="more font15" v-if="hasMore && refundList.length > 0">
					<text class="pull-icon"></text>
					<text>{{ loadingText }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 空状态 -->
		<view class="default" v-if="showEmpty">
			<view style="margin-bottom: -30rpx;">
				<image style="width: 120rpx;" src="/static/icons/empty-state.svg" />
			</view>
			<text style="font-size: 24rpx;">您还没有退换货信息哦~</text>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import {
		inject
	} from 'vue'
	export default {
		data() {
			return {
				refundList: [],
				currentPage: 1,
				hasMore: true,
				loading: false,
				refreshing: false,
				showEmpty: false,
				loadingText: '上拉加载...',
				imgBaseUrl: '', // 需要从配置中获取
				refundStateMap: {
					0: '',
					1: '退款申请中',
					2: '待提交物流信息',
					3: '待退款',
					9: '退款已关闭',
					10: '退款成功',
					11: '商家拒绝'
				},
				page: 1
			}
		},
		onLoad() {
			this.initData();
		},
		onShow() {
			// 删除会话存储中的快递公司选择
			uni.removeStorageSync('exChoosed');
		},
		methods: {
			initData() {
				this.loadRefundList(1);
			},

			// 加载退款列表
			async loadRefundList(page = 1) {
				if (this.loading) return;

				this.loading = true;
				if (page === 1) {
					this.refundList = [];
					this.showEmpty = false;
				}

				// 这里需要替换为实际的API调用

				const res = await api.orderApi.getOrderRefundList({
					page: this.page,

				})

				this.loading = false;
				this.refreshing = false;

				if (res.r === 0) {
					const newList = res.data.lists || [];
					if (page === 1) {
						this.refundList = newList;
					} else {
						this.refundList = [...this.refundList, ...newList];
					}

					this.hasMore = newList.length > 0;
					this.currentPage = page;

					if (this.refundList.length === 0) {
						this.showEmpty = true;
					}
				} else if (res.r === -1000) {
					this.showEmpty = true;
				}



			},



			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.loadRefundList(1);
			},

			// 上拉加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.loadRefundList(this.currentPage + 1);
				}
			},

			// 获取退款状态文本
			getRefundStateText(item) {
				if (item.arbit_id !== 0 && item.refund_state === 11) {
					if (item.arbit_state === 0) {
						return '已申请仲裁';
					} else if (item.arbit_state === 1) {
						return '仲裁已完成';
					} else if (item.arbit_state === 2) {
						return '仲裁已取消';
					}
				}
				return this.refundStateMap[item.refund_state] || '';
			},

			// 判断是否显示按钮
			shouldShowButtons(item) {
				if (item.refund_state === 9) return false; // 退款关闭
				if (item.refund_state === 3) return false; // 待退款
				if (item.arbit_id !== 0 && item.refund_state === 11) return false; // 已申请仲裁
				return true;
			},

			// 获取按钮配置
			getButtonConfig(item) {
				const config = {
					showCancel: false,
					showApply: false,
					showCancelRefund: false,
					showVerdict: false,
					showLogistic: false
				};

				if (item.arbit_id === 0) {
					if (item.refund_state === 0) {
						config.showApply = true;
					} else if (item.refund_state === 1) {
						config.showCancelRefund = true;
					} else if (item.refund_state === 11) {
						config.showVerdict = true;
					} else if (item.refund_state === 2) {
						config.showCancel = true;
						config.showLogistic = true;
					}
				}

				return config;
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 跳转到详情页
			goToDetail(item) {
				if (item.refund_state === 9) return; // 退款关闭不能进入详情
				uni.navigateTo({
					url: `/pages/order/refund-detail?id=${item.id}`
				});
			},

			// 取消退款
			cancelRefund(refundId) {
				uni.showModal({
					title: '提示',
					content: '确定要取消退款吗？',
					success: (res) => {
						if (res.confirm) {
							this.requestCancelRefund(refundId);
						}
					}
				});
			},

			// 取消退款API请求
			requestCancelRefund(refundId) {
				uni.request({
					url: '/api/home/refund_record/cancel_refund',
					method: 'POST',
					data: {
						refund_id: refundId
					},
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.showToast({
							title: res.data.msg || '操作成功',
							icon: 'none'
						});
						if (res.data.r === 0) {
							this.loadRefundList(1);
						}
					},
					fail: () => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				});
			},

			// 申请仲裁
			applyVerdict(id) {
				uni.navigateTo({
					url: `/pages/order/apply-verdict?id=${id}`
				});
			},

			// 完善物流信息
			completeLogistic(manufacId, refundId) {
				uni.navigateTo({
					url: `/pages/order/complete-logistic?id=${manufacId}&redundid=${refundId}`
				});
			},

			// 申请退款
			applyRefund(id) {
				// 根据实际需求实现申请退款逻辑
				console.log('申请退款:', id);
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #e5e5e5;
		z-index: 999;

		.back {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.wrapper {
		margin-top: 88rpx;
		height: calc(100vh - 88rpx);
	}

	.scroll-view {
		height: 100%;
	}

	.refund-list-box {
		padding: 20rpx;
	}

	.refund-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.orderbox-h {
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		justify-content: space-between;
		align-items: center;
	}

	.orderbox-hl {
		align-items: center;

		.store-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
			border-radius: 50%;
		}

		.r-arrow {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.order-status {
		color: #ff6b35;
		font-size: 28rpx;
	}

	.goods-list {
		padding: 30rpx;
		align-items: flex-start;
	}

	.photos {
		margin-right: 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}
	}

	.titles {
		flex: 1;

		view:first-child {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		view:last-child {
			font-size: 24rpx;
			color: #999;
		}
	}

	.stipulates {
		padding: 30rpx;
		justify-content: flex-end;
		border-top: 2rpx solid #f0f0f0;
	}

	.order-btn {
		padding: 16rpx 30rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		color: #666;

		&.border-red {
			border-color: #ff6b35;
			color: #ff6b35;
		}
	}

	.more {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}

	.default {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}

		text {
			color: #999;
			font-size: 28rpx;
		}
	}

	// 通用样式类
	.display-flex {
		display: flex;
	}

	.display-flex-l {
		display: flex;
		align-items: flex-start;
	}

	.display-flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.font13 {
		font-size: 26rpx;
	}

	.font15 {
		font-size: 30rpx;
	}

	.font18 {
		font-size: 36rpx;
	}
</style>